<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Alpine.js Tabs Component</title>
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
  <style>[x-cloak] {
    display: none !important;
  }</style>
  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<div class="flex justify-center items-center min-h-screen bg-gray-50">

  <div class="w-1/2" x-data="{ selected: 0 }">
    <div class="sm:hidden">
      <label for="tabs" class="sr-only">Select a tab</label>
      <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
      <select id="tabs"
              @change="selected = $el.selectedIndex"
              name="tabs"
              class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
        <option :selected="selected === 0">My Account</option>

        <option :selected="selected === 1">Company</option>

        <option :selected="selected === 2">Team Members</option>

        <option :selected="selected === 3">Billing</option>
      </select>
    </div>
    <div class="hidden sm:block">
      <nav class="isolate flex divide-x divide-gray-200 rounded-lg shadow" aria-label="Tabs">
        <!-- Current: "text-gray-900", Default: "text-gray-500 hover:text-gray-700" -->
        <a href="#"
           @click="selected = 0"
           :class="[selected === 0 ? 'text-gray-900': 'text-gray-500 hover:text-gray-700']"
           class="rounded-l-lg group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 focus:z-10" aria-current="page">
          <span>My Account</span>
          <span aria-hidden="true"
                :class="[selected === 0 ? 'bg-indigo-500': 'bg-transparent']"
                class="absolute inset-x-0 bottom-0 h-0.5"></span>
        </a>

        <a href="#"
           @click="selected = 1"
           :class="[selected === 1 ? 'text-gray-900': 'text-gray-500 hover:text-gray-700']"
           class="group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 focus:z-10">
          <span>Company</span>
          <span aria-hidden="true"
                :class="[selected === 1 ? 'bg-indigo-500': 'bg-transparent']"
                class="absolute inset-x-0 bottom-0 h-0.5"></span>
        </a>

        <a href="#"
           @click="selected = 2"
           :class="[selected === 2 ? 'text-gray-900': 'text-gray-500 hover:text-gray-700']"
           class="group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 focus:z-10">
          <span>Team Members</span>
          <span aria-hidden="true"
                :class="[selected === 2 ? 'bg-indigo-500': 'bg-transparent']"
                class="absolute inset-x-0 bottom-0 h-0.5"></span>
        </a>

        <a href="#"
           @click="selected = 3"
           :class="[selected === 3 ? 'text-gray-900': 'text-gray-500 hover:text-gray-700']"
           class="rounded-r-lg group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 focus:z-10">
          <span>Billing</span>
          <span aria-hidden="true"
                :class="[selected === 3 ? 'bg-indigo-500': 'bg-transparent']"
                class="absolute inset-x-0 bottom-0 h-0.5"></span>
        </a>
      </nav>
    </div>

    <div class="bg-white h-80 mt-2 rounded-lg p-4">
      <p x-cloak x-show="selected === 0">
        My Account Content
      </p>

      <p x-cloak x-show="selected === 1">
        Company Content
      </p>

      <p x-cloak x-show="selected === 2">
        Team Members Content
      </p>

      <p x-cloak x-show="selected === 3">
        Billing Content
      </p>
    </div>
  </div>
</div>
</body>
</html>